<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ include file="/include/taglibs.jsp"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/styles/hx.base.css" />
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/styles/hx.content.css" />
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/common.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/openflash/swfobject.js"></script>

<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/styles/calendar-themes.css" />
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/calendar.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/calendar-zh.js"></script>

<script type="text/javascript">
	function showTimeRangeInput(type) {
		$(".timeRangeInput").css("display","none");
		$("#"+type).css("display","block");
	}
</script>
<style>
body {
	margin:0px; padding:0px;
}
</style>
<style type="text/css">
.info-container {
	margin: 4px 0px 4px 0px;
}

.info-container .info-title {
	font-size: 14px;
	font-weight: bold;
	line-height: 32px;
	height: 32px;
	padding: 0px 0px 0px 14px;
	background-image: url(images/combo_list_img.gif);
	background-repeat: no-repeat;
	background-position: 0px center;
}

.info-container .info {
	height: 24px;
	line-height: 24px;
}

.info-container .col {
	border-width: 1px;
	border-style: solid;
	border-left-style: solid;
	border-top-color: #eee;
	border-right-color: #c4c4c4;
	border-bottom-color: #c4c4c4;
	border-left-color: #eee;
	text-align: center;
	font-weight: bold;
	background-color: #e8e8e8;
}

.info-container .value {
	text-align: center;
	background-color: #fff;
}

.info-container .cewolf {
	padding: 8px 0px 8px 0px;
}

a#more {
	background-image: url("images/arrow_down.gif");
	background-position: center center;
	background-repeat: no-repeat;
}
</style>
<style type="text/css">
body {
	background-image: url(images/mainframe-bg.jpg);
	background-repeat: repeat;
	margin: 0px auto;
	padding: 0px;
	position: relative;
	text-align: center;
}
</style>
</head>
<body>
<div id="query-flow-pane" style="overflow:auto">
<table style="color:white;font-weight:bold;background-color: gray;width:100%">
	<tr>
		<td>
		<table style="color:white;font-weight:bold;background-color: gray;">
			<tr>
			<td valign="middle">
			<select id="rangeType">
				<option value="custom" onclick="showTimeRangeInput('custom')">自定义</option>
				<option value="15min" onclick="showTimeRangeInput('15min')">15分钟</option>
				<option value="30min" onclick="showTimeRangeInput('30min')">30分钟</option>
				<option value="2hour" onclick="showTimeRangeInput('2hour')">2小时</option>
			</select>
			</td>
			<td width="50"></td>
			<td valign="middle" >
				<div id="custom" class="timeRangeInput">
					<table style="color:white;font-weight:bold">
						<tr>
							<td valign="middle">From:</td>
							<td>
								<input id="startTime" name="startTime" type="text" style="width: 125px;" value="${param.startTime}" />
								<a href id="startDateTrigger">
									<img src="<%=request.getContextPath() %>/images/calendar.gif" border="0" />
								</a>
							</td>
							<td valign="middle">To:</td>
							<td>
								<input id="endTime" name="endTime" type="text" style="width: 125px;" value="${param.endTime}" />
								<a href id="endDateTrigger">
									<img src="<%=request.getContextPath() %>/images/calendar.gif" border="0" />
								</a>
							</td>
							<td><button onclick="javascript:var startTime = document.getElementById('startTime').value;var endTime = document.getElementById('endTime').value;showAction('startTime!'+startTime+'_T_endTime!'+endTime)">查询</button></td> 
						</tr>
					</table>
				</div>
				<div id="15min" class="timeRangeInput" style="display:none">
					<table style="color:white;font-weight:bold">
						<tr>
							<td><button onclick="javascript:showAction('15min')">查询</button></td>
						</tr>
					</table>
				</div>
				<div id="30min" class="timeRangeInput" style="display:none">
					<table style="color:white;font-weight:bold">
						<tr>
							<td><button onclick="javascript:showAction('30min')">查询</button></td>
						</tr>
					</table>
				</div>
				<div id="2hour" class="timeRangeInput" style="display:none">
					<table style="color:white;font-weight:bold">
						<tr>
							<td><button onclick="javascript:showAction('2hour')">查询</button></td>
						</tr>
					</table>
				</div>
			</td>
			</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
		</td>
	</tr>
</table>
<table id="device-performance" border="0" cellpadding="0" cellspacing="4" style="width: 100%; margin: 4px 0px 4px 0px;">
	<tr>
		<td>
		<table id="dev-current" class="chart-container" style="width: 100%;" border="0" cellpadding="0" cellspacing="8">
			<tr>
				<td>
					<div class="chart-title" style="position: relative;float: left;"><span class="title">服务可用性 (%)</span><span class="link"></span></div>
				</td>
			</tr>
			<tr id="tr_body">
				<td id="pt-speed-current-chart-content" class="chart-content"></td>
			</tr>
		</table>
		<script type="text/javascript">
			var so = new SWFObject("<%=request.getContextPath() %>/scripts/openflash/open-flash-chart.swf", "pt-speed-current-chart", "100%", "100%", "9", "#ffffff");
			so.addVariable("data", "ne.iptvquality.do?pa=id@${param.id}");
			so.addParam("allowScriptAccess", "sameDomain");
			so.addParam("wmode", "transparent");
			so.write("pt-speed-current-chart-content");
		</script>
		</td>
	</tr>
</table>
</div>
<script language="javascript">
function showAction(date){
	document.getElementById("tr_body").innerHTML="";
	$("#tr_body").append("<td id=\"pt-speed-current-chart-content2\" class=\"chart-content\"></td>");
	var so = new SWFObject("<%=request.getContextPath() %>/scripts/openflash/open-flash-chart.swf", "pt-speed-current-chart", "100%", "100%", "9", "#ffffff");
	//so.addVariable("data", "ne.iptvquality.do?pa=id@${param.id}_!_date@"+date);
	so.addVariable("data", "ne.iptvquality.do?pa=id@${param.id}&statunitsec="+date+"&startTime="+startTime+"&endTime="+endTime);
	so.addParam("allowScriptAccess", "sameDomain"); 
	so.addParam("wmode", "transparent");
	so.write("pt-speed-current-chart-content2");
	
	//return false;
}

function showAction(date,startTime,endTime){
	document.getElementById("tr_body").innerHTML="";
	$("#tr_body").append("<td id=\"pt-speed-current-chart-content2\" class=\"chart-content\"></td>");
	var so = new SWFObject("<%=request.getContextPath() %>/scripts/openflash/open-flash-chart.swf", "pt-speed-current-chart", "100%", "100%", "9", "#ffffff");
	so.addVariable("data", "ne.iptvquality.do?pa=id@${param.id}&statunitsec="+date+"&startTime="+startTime+"&endTime="+endTime);
	so.addParam("allowScriptAccess", "sameDomain"); 
	so.addParam("wmode", "transparent");
	so.write("pt-speed-current-chart-content2");
}

Zapatec.Calendar.setup({
        firstDay:1,
        showOthers:true,
        range:[1980.01, 2010.12],
        inputField:"startTime",
        button:"startDateTrigger",
        ifFormat:"%Y-%m-%d %H:%M",
        showsTime: true
        });
Zapatec.Calendar.setup({
        firstDay:1,
        showOthers:true,
        range:[1980.01, 2010.12],
        inputField:"endTime",
        button:"endDateTrigger",
        ifFormat:"%Y-%m-%d %H:%M",
        showsTime: true
        });
</script>
</body>
</html>